import { createStore } from "@/vuex";

const store = createStore({
  strict: true, //! 开启严格模式(开启严格模式则仓库状态 state 数据不能在 mutations 方法外面发生改变)
  state: {
    count: 1,
  },
  // 类似于计算属性
  getters: {
    double(state) {
      return state.count * 2;
    },
  },
  // 同步改变状态
  mutations: {
    ADD(state, payload) {
      state.count += payload;
    },
  },
  // 异步更改状态
  actions: {
    asyncAdd({ commit }, payload) {
      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          commit("ADD", payload); // 提交更新状态方法
          resolve();
        }, 1000);
      });
    },
  },
  modules: {
    aModule: {
      namespaced: true, // 添加命名空间则如果父子模块有相同方法不会一起执行,不然会一起执行相同方法
      state: {
        count: 1,
      },
      mutations: {
        ADD(state, payload) {
          state.count += payload;
        },
      },
      actions: {
        asyncAdd({ commit }, payload) {
          return new Promise(function (resolve, reject) {
            setTimeout(() => {
              console.log("a");
              // debugger;
              commit("ADD", payload);
              resolve();
            }, 1000);
          });
        },
      },
      modules: {
        cModule: {
          state: {
            count: 3,
          },
          mutations: {
            ADD(state, payload) {
              state.count += payload;
            },
          },
          actions: {
            asyncAdd({ commit }, payload) {
              return new Promise(function (resolve, reject) {
                setTimeout(() => {
                  console.log("c");
                  commit("ADD", payload); // 提交更新状态方法
                  resolve();
                }, 1000);
              });
            },
          },
        },
        // dModule: {
        //   state: {
        //     count: 4,
        //   },
        //   mutations: {
        //     ADD(state, payload) {
        //       state.count += payload;
        //     },
        //   },
        //   actions: {
        //     asyncAdd() {},
        //   },
        // },
      },
    },
    bModule: {
      namespaced: true,
      state: {
        count: 2,
      },
      mutations: {
        ADD(state, payload) {
          state.count += payload;
        },
      },
      actions: {
        asyncAdd({ commit }, payload) {
          return new Promise(function (resolve, reject) {
            setTimeout(() => {
              console.log("b");
              commit("ADD", payload); // 提交更新状态方法
              resolve();
            }, 1000);
          });
        },
      },
    },
  },
  plugins: [customPlugin],
});

function customPlugin(store) {
  // let local = localStorage.getItem("vuex:state");
  // if (local) {
  //   store.replaceState(JSON.parse(local));
  // }
  // store.subscribe((mutation, state) => {
  //   console.log(mutation, state);
  //   localStorage.setItem("vuex:state", JSON.stringify(state));
  // });
}

// 动态注册模块
store.registerModule(["aModule", "dModule"], {
  state: {
    count: 4,
  },
  mutations: {
    ADD(state, payload) {
      state.count += payload;
    },
  },
  actions: {
    asyncAdd() {},
  },
});

export default store;
